Vue.component("left-box", {
    data() {
        return {
            isActive: 1,
            sectionShow: true,
            pdfData: null
        }
    },
    template: `
            <div class="content">
                    <div class="top-bar">
                        <a href="" class="home-btn nuxt-link-active">
                            <img src="./img/home-icon.9f0571e.png">
                        </a>
                        <span class="course-name">
                            Linux 系统简介
                        </span>
                    </div>
                    <div class="left-bar">
                        <div class="menu-tabs">
                            <div class="tab-item relative full-width"  @click="isActive=1;sectionShow=true">
                                <div class="inner relative">
                                    <div class="tab-icon inline-block" :class="{active: isActive === 1}"
                                        style="background-position-y: -5px;"></div>                                    
                                    <div class="tab-tip">
                                        章节
                                    </div>
                                </div>                                
                            </div>
                            <div class="tab-item relative full-width"  @click="isActive=2">
                                <div class="inner relative">
                                    <div class="tab-icon inline-block" :class="{active: isActive === 2}"
                                        style="background-position-y: -34px;"></div>                                    
                                    <div class="tab-tip">
                                        步骤
                                    </div>
                                </div>                                
                            </div>
                            <div class="tab-item relative full-width"  @click="isActive=3">
                                <div class="inner relative">
                                    <div class="tab-icon inline-block" :class="{active: isActive === 3}"
                                        style="background-position-y: -63px;"></div>                                    
                                    <div class="tab-tip">
                                        报告
                                    </div>
                                </div>                                
                            </div>
                            <div class="tab-item relative full-width"  @click="isActive=4">
                                <div class="inner relative">
                                    <div class="tab-icon inline-block" :class="{active: isActive === 4}"
                                        style="background-position-y: -92px;"></div>                                    
                                    <div class="tab-tip">
                                        讨论
                                    </div>
                                </div>                                
                            </div>
                        </div>
                    </div>
                    <div  class="content-box">                        
                        <div class="content-box-data" v-if="isActive === 1">
                            <sectionList :show="sectionShow" @click-pdf="clickPdf"> </sectionList>
                            <pdfDom :show="sectionShow" :pdf="pdfData" @click-pdf="clickPdf"> </pdfDom>
                        </div>
                        <div class="content-box-data" v-if="isActive === 2">步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤步骤</div>
                        <div class="content-box-data" v-if="isActive === 3">报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告</div>
                        <div class="content-box-data" v-if="isActive === 4">讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论讨论</div>
                    </div>
          
                </div>
            `,
    methods: {
        clickPdf(value) {
            if (value) {
                this.sectionShow = !this.sectionShow
                this.pdfData = value
            } else {
                this.sectionShow = !this.sectionShow
            }
        }
    },
    components: {
        'sectionList': { //子组件必须在父组件内创建才行
            props: ["show"],
            template: `                
                <ul class="section-list" v-if="show">
                    <li v-for="section in sections" :key="section.name" @click="clickPdf(section)">{{section.name}}</li>
                </ul>

            `,
            data() {
                return {
                    sections: null
                }
            },
            mounted() {
                this.get();
            },
            methods: {
                get() {
                    //发送get请求
                    axios.get("http://222.30.193.217/api/section")
                        .then(res => {
                            console.log(res);
                            this.sections = res.data;

                        }).catch(error => {
                            console.log(error.response)
                        });

                },
                clickPdf(value) {
                    this.$emit('click-pdf', value)
                }
            }
        },
        'pdfDom': {
            props: ["show", "pdf"],
            template: `
                <div v-if="!show" class="pdf-box">
                    <div class="pdf-title"><el-page-header @back="goBack" :content="pdf.name"></el-page-header></div> 
                    <div class="pdf-content">
                        <iframe :src="pdf.download" width="100%" height="100%" style="">                                                
                        </iframe>
                    </div>         
                </div>
            `,
            methods: {
                goBack() {
                    this.$emit("click-pdf")
                },
            }
        }

    }

})